<!--
 * @Author: wangshuguang
 * @Date: 2022-03-28 17:55:50
 * @LastEditTime: 2022-04-15 13:28:41
 * @LastEditors: wangshuguang
 * @Description: 收入记录详情
-->
<template>
  <div>
    <!-- 顶部内容 -->
    <div class="head">
      <div class="title">
        实退￥{{ dataForm['realRefundFee'] }}
      </div>
      <div>退款备注：{{ dataForm['remark'] }}</div>
    </div>
    <!-- 退款记录 -->
    <!-- <div class="formBox refundList">
      <div class="formLabel">退款记录：</div>
      <div class="formValue">
        <div v-if="refundList.length">
          <div v-for="item of refundList" :key="item.id">
            <span>{{ item.refundStatus }}</span>
            <span>{{ item.refundFee }}</span>
            <span>{{ item.createTime }}</span>
            <el-button type="text">详情</el-button>
          </div>
        </div>
        <div v-else>
          无
        </div>
      </div>
    </div> -->
    <!-- 订单详情 -->
    <el-row>
      <el-col :span="12" class="leftDetail">
        <div v-for="item of leftDetail" :key="item.key" class="formBox">
          <div class="formLabel">{{ item.label }}：</div>
          <div class="formValue">{{ dataForm[item.key] }}</div>
        </div>
      </el-col>
      <el-col :span="12">

        <div class="rightTopDetail">
          <div class="formBox ">
            <div class="formLabel">原订单金额：</div>
            <div class="formValue">￥{{ dataForm['totalFee'] }}</div>
          </div>
          <div class="formBox ">
            <div class="formLabel">申请退款金额：</div>
            <div class="formValue">￥{{ dataForm['refundFee'] }}</div>
          </div>
          <div class="formBox ">
            <div class="formLabel">退款状态：</div>
            <div class="formValue">{{ dataForm['refundStatusZh'] }}</div>
          </div>
        </div>
        <div class="rightBottomDetail">
          <div class="formBox ">
            <div class="formLabel">实退：</div>
            <div class="formValue">￥{{ dataForm['realRefundFee'] }}</div>
          </div>
          <div class="formBox ">
            <div class="formLabel">退款顾客：</div>
            <div class="formValue">{{ dataForm['customerName'] }}</div>
          </div>
          <div class="formBox ">
            <div class="formLabel">退款经办人：</div>
            <div class="formValue">{{ dataForm['operatorName'] }}</div>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { qryRefundListByOrderNo } from '@/api/payCenter'
export default {
  props: {
    infoConfig: {}
  },
  data() {
    return {
      refundList: [],
      dataForm: {
        num: 1
      },
      leftDetail: [
        { label: '退款单号', key: 'refundNo' },
        { label: '第三方退款单号', key: 'thirdOrderNo' },
        { label: '支付单号', key: 'paymentNo' },
        { label: '业务单号', key: 'orderNo' },
        { label: '原业务订单来源', key: 'sourceZh' },
        { label: '退款提交时间', key: 'createTime' },
        { label: '退款成功时间', key: 'updateTime' },
        { label: '退款方式', key: 'refundMethodZh' },
        { label: '退款业务', key: 'typeZh' },
        { label: '退款门店', key: 'shopName' },
        { label: '使用插件', key: 'pluginCodeZh' }
      ]
    }
  },
  mounted() {
    console.log('infoConfig', this.infoConfig)
    this.dataForm = {
      ...this.infoConfig
    }
    qryRefundListByOrderNo(this.dataForm.orderNo).then(res => {
      console.log('res', res)
      this.refundList = res.data
    })
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.head{
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  margin-bottom: 20px;
  .title{
    font-size: 25px;
    display: flex;
    align-content: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
.refundList{
  padding: 20px 0;
  border: 1px solid #ddd;
  border-right: none;
  border-left: none;
  margin: 20px 0;
}
.rightTopDetail{
  border-bottom: 1px solid #ddd;
}
.leftDetail{
  border-right: 1px solid #ddd;
}
.formBox{
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  .formLabel{
    width: 150px;
    text-align: right;
    font-weight: bold;
  }
  .formValue{
    flex: 1;
    text-align: right;
    padding-right: 20px;
  }
}
</style>
